<%@page 
	pageEncoding="utf-8"
	contentType="text/html; charset=utf-8"
 %>
<!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="Keywords" content="" />
    <title>庠序系统登陆页面</title>
    <link rel="shortcut icon" href="img/study.ico">
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        /*利用一个div，让这个div长度和宽度都和浏览器相同，给这个div添加背景就相当于给页面添加了背景*/
        #index{ 
            /*定位操作*/
            position: absolute;
            left: 0px;
            width: 0px;
            
            /*div大小设置：设置成铺满整个页面*/
            width: 100%;
            height: 100%;

            /*设置背景图片*/
            
            background-image: url("img/background.jpg");
            background-repeat: no-repeat; /*不平铺*/
            background-size: 100% 100%; /*背景大小设置：此处设置成同div大小相同*/

        }
        #login_index{
            height: 201px;
            width: 329px;
            /*background-color: #4589CB;*/
            background-image: url("img/lanse.jpg");
            background-size: 100% 100%;

            /*让login在页面正中间显示*/
            position: absolute;     
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
                
            /*设置背景图片的透明度*/
            opacity : 0.5;

            text-align: center;

            
        }
        #login{
            width: 261px;

            vertical-align: middle;
            display: inline-block;
            /*background-color: red;*/

            text-align: center;

        }

        #login_index span{
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
        span{
            color: #08DCFC;
            font-weight: bold;
        }
        #submit{
            color: #08DCFC;
            font-weight: bold;
        }
        #reset{
            color: #BD12F7;
            font-weight: bold;
        }
        #title{
            color: #0BAEF8;
            font-weight: bold;
            font-family: 楷体;
            font-size: 60px;

            /*position: absolute;
            top: 180px;
            left: 50%;
            transform: translate(-50%, 0);*/
        }

        #info{
            width: 380px;
            height: 60px;

            position: absolute;
            top: -32%;
            left: -8%;

            text-align: center;
            line-height: 60px;
        }
        
        #error {
        	color: red;
        }
        

    </style>
</head>

<body>
    <div id="index">
        
        <div id="login_index">
            <div id="info"><span id="title">庠序登录系统</span></div> <!-- 改进的地方 -->
            <div id="login">
                <form action="<%=request.getContextPath() %>/toIndex.do" method="post">
                    <span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 号 ：</span><input type="text" name="name" />
                    <br /><br />
                    <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 码 ：<input type="password" name="password" />
                    <br /><br />
                    <span>确认密码：</span><input type="password" name="password2" />
                    <br /><br />
                    <input type="submit" id="submit" value="登&nbsp;&nbsp;录" />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="reset" id="reset" value="重&nbsp;&nbsp;置" />
                </form>
            </div>
            <span></span>
            <div>
            	<span id="error">${failed}</span>
            </div>
        </div> 
    </div>
</body>
</html>
